<template>
  <div class="login">
    <div class="mylogin" align="center">
      <h4 align="center">登录</h4>
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-width="0px"
      >
        <el-form-item label="" prop="account" style="margin-top: 20px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                class="inps"
                placeholder="账号"
                v-model="loginForm.account"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <br>
        <el-form-item label="" prop="passWord">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                class="inps"
                type="password"
                placeholder="密码"
                v-model="loginForm.passWord"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 25px">
          <el-button type="primary" round class="submitBtn" @click="submitForm"
            >登录
          </el-button>
        </el-form-item>
        <div class="unlogin">
          <router-link :to="{ path: '/forgetpwd' }"> 忘记密码? </router-link>
          |
          <router-link :to="{ path: '/regist' }">
            <a href="register.vue" target="_blank" align="right">注册新账号</a>
          </router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapMutations } from "vuex";
// main.js中引入ElementUI
 
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);
Vue.use(ElementUI);
  import axios from 'axios';
export default {

  name: "LoginLh",
  data: function () {
    return {
      loginForm: {
        account: "",
        passWord: "",
      },
      loginRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
 
  methods: {
    ...mapMutations(["changeLogin"]),
    submitForm() {
      const userAccount = this.loginForm.account;
      const userPassword = this.loginForm.passWord;

      if (!userAccount) {
        return this.$message({
          type: "error",
          message: "账号不能为空！",
        });
      }
      if (!userPassword) {
        return this.$message({
          type: "error",
          message: "密码不能为空！",
        });
      }
      axios.get(`http://localhost:8088/login`,{
            params:{
                name:userAccount,
                password:userPassword
            }
        }).then(resp=>{
            if(resp.data){
                //console.log('我就来了')
              //  axios.get(`http://localhost:8088/user`,{
              //     params:{
              //       name:userAccount
              //     }
              //   }).then(resp=>{
              //     if(resp.data){
              //       window.sessionStorage.setItem('user',JSON.stringify(resp.data))
              //       console.log(sessionStorage.getItem('user'))
              //       // window.$user = response.data
              //       // console.log(window.$user)
              //     }
              //   })
                window.sessionStorage.setItem('user',JSON.stringify(resp.data))
                console.log(JSON.parse(sessionStorage.getItem('user')).id)
                location.replace("http://localhost:8080/")
                //this.$router.push("/");
            }else{
                this.$message.error("登录失败"),
                this.dialogVisible = true;
                return false;
            }
        })
      console.log("用户输入的账号为：", userAccount);
      console.log("用户输入的密码为：", userPassword);
    },
  },
};
</script>
<style lang="css" scoped>
  .login {
    width: 83vw;
    padding: 0;
    margin: 0;
    /* height: 105vh; */
    height: 100%;
    font-size: 18px;
    background-position: left top;
    background-color: rgb(10, 158, 133);
    /* background-color: rgb(151, 177, 33); */
    color: #fff;
    font-family: "Source Sans Pro";
    position: relative;
  }
 
  .mylogin {
    width: 280px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 50px 40px 40px 40px;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    opacity: 1;
    /* background: linear-gradient(
      230deg,
      rgba(50, 60, 33, 43) 0%,
      rgb(0, 0, 0) 100%
    ); */
    background: linear-gradient(to top, rgb(0, 255, 136), 5%, pink);
  }
 
  .inps input {
    border: none;
    color: #fff;
    background-color: transparent;
    font-size: 12px;
  }
 
  .submitBtn {
    background-color: transparent;
    color: #39f;
    width: 200px;
  }
</style>
